<template>
  <div>
    <div  v-for="(item,index) in fileList" :key="index" style="display: inline-block; padding: 10px; margin-right:10px;" :class="border?'border':''">
      <span v-if="!item" style="font-size: 12px;font-style: italic;">无文件</span>
      <img v-else-if="item && (item.indexOf('.png') != -1 || item.indexOf('.webp') != -1 ||
          item.indexOf('.jpg') != -1 || item.indexOf('.jpeg') != -1 || item.indexOf('.bmp') != -1 || item.indexOf('.gif') != -1 )"
           :src="getFileView(item)"   @click="getImageOpen(item)" title="点击预览" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>

      <a-popconfirm v-else-if="item && (item.indexOf('.pdf') != -1)" title="确定预览文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="pdf" :title="title"  class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>

      <a-popconfirm v-else-if="item && (item.indexOf('.doc') != -1  || item.indexOf('.docx') != -1 )" title="确定下载文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="doc" :title="title" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>

      <a-popconfirm v-else-if="item && (item.indexOf('.json') != -1 )" title="确定下载文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="json" :title="title" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>

      <a-popconfirm v-else-if="item && (item.indexOf('.mp3') != -1 || item.indexOf('.wma') != -1 || item.indexOf('.wav') != -1 )" title="确定下载文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="music" :title="title" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>

      <a-popconfirm v-else-if="item && (item.indexOf('.avi') != -1 || item.indexOf('.wmv') != -1 || item.indexOf('.mp') != -1 ||
     item.indexOf('.mov') != -1 || item.indexOf('.rm') != -1 || item.indexOf('.ram') != -1 ||
     item.indexOf('.swf') != -1 || item.indexOf('.flv') != -1 || item.indexOf('.mp4') != -1
     )" title="确定下载文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="video" :title="title" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>


      <a-popconfirm v-else-if="item && (item.indexOf('.ppt') != -1 || item.indexOf('.pptx') != -1 )" title="确定下载文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="ppt" :title="title" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>

      <a-popconfirm v-else-if="item && (item.indexOf('.txt') != -1 ) || (item.indexOf('.text') != -1 )" title="确定下载文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="txt" :title="title" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>

      <a-popconfirm v-else-if="item && (item.indexOf('.zip') != -1 ) || (item.indexOf('.rar') != -1 )" title="确定下载文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="zip" :title="title" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>

      <a-popconfirm v-else-if="item && (item.indexOf('.xls') != -1 || item.indexOf('.xlsx') != -1 )" title="确定下载文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="xls" :title="title" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>

      <a-popconfirm v-else title="确定下载文件吗?"  @confirm="() => downloadFile(item)">
        <img :src="file" :title="title" class="file-icon" :style="{width:width?width+'px':'auto', height:height+'px'}"/>
      </a-popconfirm>
    </div>
    <j-image-open ref="previewImageOpen"></j-image-open>
  </div>

</template>


<script>
  const doc = require('@/assets/fileImage/doc.png')
  const pdf = require('@/assets/fileImage/pdf.png')
  const ppt = require('@/assets/fileImage/ppt.png')
  const txt = require('@/assets/fileImage/txt.png')
  const zip = require('@/assets/fileImage/zip.png')
  const xls = require('@/assets/fileImage/xls.png')
  const json = require('@/assets/fileImage/json.png')
  const file = require('@/assets/fileImage/file.png')
  const music = require('@/assets/fileImage/music.png')
  const video = require('@/assets/fileImage/video.png')

  import {getFileAccessHttpUrl } from '@/api/manage'

  export default {
    name: 'JFileSlot',
    components: {
    },
    /*监听图片值*/
    watch:{
      value: {
        handler(val,oldValue) {
          let list = val?val.split(","):[];
          if(this.size>0 && list.length>this.size){
            list = list.slice(-this.size);
          }
          this.$set(this,'fileList',list)
          //this.$refs.previewImageOpen.imageListOpen(list)
          //console.log(this.fileList);
          //this.fileSrc = getFileAccessHttpUrl(val);
          //this.url = this.fileSrc.toLocaleLowerCase();
          //console.log(this.url);
        },
        //立刻执行handler
        immediate: true
      }
    },
    data () {
      return {
        doc,
        pdf,
        ppt,
        txt,
        zip,
        xls,
        json,
        music,
        video,
        file,
        fileSrc:'',
        url:'',
        fileList:[],
      }
    },
    props: {
      value: {
        type: String,
        required: false,
      },
      length: {
        type: Number,
        required: false,
        default: 25,
      },
      height:{
        type: Number,
        required: false,
        default: 80,
      },
      width:{
        type: Number,
        required: false,
        default: null,
      },
      border:{
        type: Boolean,
        required: false,
        default: true,
      },
      title:{
        type: String,
        required: false,
        default: '点击下载',
      },
      //最多显示多少和文件
      size:{
        type: Number,
        required: false,
        default: 0,
      }
    },
    created() {
      // console.log(11111)
      // console.log(this.doc)
    },
    methods: {
      /* 图片放大 旋转 预览 */
      getImageOpen(text){
        //console.log(text);
        if(text && text.indexOf(",")>0){
          var list = text.split(",");
          this.$refs.previewImageOpen.imageListOpen(list)
        }else{
          //console.log(this.$refs)
          this.$refs.previewImageOpen.imageOpen(text)
        }

      },
      /* 图片预览 */
      getFileView(text){
        if(text && text.indexOf(",")>0){
          text = text.substring(0,text.indexOf(","))
        }
        return getFileAccessHttpUrl(text)
      },

      /**
       * 下载文件
       * @param url 文件路径
       * @param fileName 文件名
       * @param parameter
       * @returns {*}
       */
      downloadFile(url, fileName, parameter) {
        if(!url){
          this.$message.warning("未知的文件")
          return;
        }
        if(url.indexOf(",")>0){
          url = url.substring(0,url.indexOf(","))
        }
        window.open(getFileAccessHttpUrl(url));
      },


    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style scoped>
  .file-icon{
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    pointer-events: auto !important;
  }

  .border{
    border: #cccccc 1px dashed;
    padding: 5px;
  }
  .jeecg-form-container-disabled fieldset[disabled] .file-icon{
    -ms-pointer-events: auto !important;
    pointer-events: auto !important;
  }
</style>
